<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">
					{{ lang_common.shopNote }}
				</view>
				<view></view>
			</view>

			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>

		<!-- 列表 -->
		<view class="u-p-t-6">
			<mescroll-body height="calc(100vh - 304rpx - var(--status-bar-height))" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view style="padding: 0 30rpx;">
					<view class="flex-between" style="padding: 20rpx 30rpx 0;">
						<view v-for="(list, lindex) in groups" :key="lindex" :class="[lindex > 0 ? 'u-p-l-18' : '']"
							style="width: 100%;">
							<view v-for="(item, index) in list" :key="index" style="width: 100%"
								@click="jumpUrl(`/pages/other/comment/note?notesId=${ item.notesId }`)">
								<dynamic-card :item="item"></dynamic-card>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
			<!-- 留空 -->
			<view style="height: 200rpx"></view>
		</view>
	</view>
</template>

<script>
	import waterfall from '@/utils/waterfall.js'
	import { notesPage } from '@/api/user/notes.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				leftRightHeight: [0, 0],
				groups: [
					[],
					[]
				]
			}
		},
		onLoad({ merchantId }) {
			this.merchantId = merchantId
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				let queryObj = {}
				notesPage({
					pageNumber: page.num,
					pageSize: page.size,
					merchantId: this.merchantId
				}).then(res => {
					if (page.num == 1) {
						this.groups = [
							[],
							[]
						]
						this.leftRightHeight = [0, 0]
					}; //如果是第一页需手动制空列表
					waterfall({
						hs: this.leftRightHeight,
						list: res.list,
						key: 'imgUrls'
					}, (hs, e) => {
						node && node.mescroll.endSuccess(res.list.length);
						this.leftRightHeight = hs
						this.groups = [
							[...this.groups[0], ...e[0]],
							[...this.groups[1], ...e[1]]
						]
					})
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style scoped lang="scss">

</style>
